<template>
<div>
  <!-- 搜索部分 -->
  <el-row style="margin-top:2%">
    <el-col :span="24">
      <el-form :inline="true"  class="demo-form-inline">
    <el-form-item label="姓名:">
      <el-input style="width:90px;" placeholder="输入姓名" v-model="userName"></el-input>
    </el-form-item>
    <el-form-item label="账号:">
      <el-input  placeholder="请输入账号" style="width:150px;" v-model="account"></el-input>
    </el-form-item>
    <el-form-item label="手机号:">
      <el-input  placeholder="请输入手机号" v-model="phone"></el-input>
    </el-form-item>
    
        <el-form-item label="身份">
          <el-select v-model="role" style="width:130px;" class="m-2" placeholder="请选择身份">
            <el-option
              v-for="item in ident"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="状态">
          <el-select v-model="state" style="width:85px;" class="m-2" placeholder="状态">
            <el-option
              v-for="item in status"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
     

    <el-form-item>
      <el-button type="primary" @click="dofind()" >查询</el-button>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="doadd()" >添加员工</el-button>
    </el-form-item>

  </el-form>
    </el-col>
  </el-row>

  <!-- 数据部分 -->
  <el-row>
    <el-col :span="24">
      <el-table
      :data="tableData"
      stripe
      border
      style="width: auto;"
      
      @selection-change="handleSelectionChange">
      <el-table-column
        prop="id"
        label="编号"
        width="50">
      </el-table-column>
      <el-table-column
        prop="userName"
        label="姓名"
        width="100">
      </el-table-column>
      <el-table-column
        prop="phone"
        label="手机号"
        width="180">
      </el-table-column>
      <el-table-column
        prop="account"
        label="账号"
        width="180">
      </el-table-column>
      <el-table-column
        prop="passwd"
        label="密码"
        width="180">
      </el-table-column>
      <el-table-column
        prop=platformrole.roleName
        label="身份"
        width="180">
      </el-table-column>
      <el-table-column
        label="状态"
        width="80">
        <template slot-scope="scope">
         {{ scope.row.state == 1 ? "正常" : "禁用" }}
            </template>
      </el-table-column>
     
      <el-table-column
        label="操作"> 
        <template slot-scope = "scope">
        <el-button type="warning"  @click="dochange(scope.row)">修改员工</el-button>
        </template>
 
      </el-table-column>
      </el-table>
    </el-col>
  </el-row>

  <!-- 分页部分 -->
  <el-row style="margin-top:2%">
    <el-col :span="24">
      <el-pagination
    background
    :page-sizes="[1, 2, 3, 4]"
    :page-size="pageSize"
    :current-page="pageNumber"
    layout="total, sizes,prev, pager, next"
    @prev-click="prevPage"
    @next-click="nextPage"
    @size-change="sizeChange"
    @current-change="currentChange"
    :total="total">
  </el-pagination>
    </el-col>
  </el-row>

<!-- 弹窗修改部分 -->
<el-dialog title="修改员工" :visible.sync="changeuser">
  <el-row>
    <el-col :span=10 align="center">
      <el-form >
  <el-form-item label="员工姓名" label-width="85px">
  <el-input v-model="userInfo.userName" ></el-input>
  </el-form-item>
  <el-form-item label="员工账号" label-width="85px">
  <el-input v-model="userInfo.account" ></el-input>
  </el-form-item>
  <el-form-item label="员工密码" label-width="85px">
  <el-input v-model="userInfo.passwd" ></el-input>
  </el-form-item>
  <el-form-item label="员工手机号" label-width="85px">
  <el-input v-model="userInfo.phone" ></el-input>
  </el-form-item>

  <el-form-item label="身份"  label-width="85px">
          <el-select v-model="rid"   placeholder="请修改身份">
            <el-option
              v-for="item in ident"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
  </el-form-item>
  <el-form-item label="状态"  label-width="85px">
          <el-select v-model="userInfo.state"  placeholder="请修改状态">
            <el-option
              v-for="item in status"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
  </el-form>
    </el-col>
  </el-row>
  <div slot="footer" >
  <el-button @click="changeuser = false">取 消</el-button>
  <el-button type="primary" @click="makesure">确 定</el-button>
  </div>
  </el-dialog>

<!-- 添加用户弹窗部分 -->
<el-dialog title="添加员工" :visible.sync="addUser">
  <el-row>
    <el-col :span=10 align="center">
      <el-form >
  <el-form-item label="员工姓名" label-width="85px">
  <el-input v-model="insertUser.userName" placeholder="请输入用户姓名" ></el-input>
  </el-form-item>
  <el-form-item label="员工账号" label-width="85px">
  <el-input v-model="insertUser.account" placeholder="请输入用户账号"></el-input>
  </el-form-item>
  <el-form-item label="员工密码" label-width="85px">
  <el-input v-model="insertUser.passwd" placeholder="请输入用户密码" ></el-input>
  </el-form-item>
  <el-form-item label="员工手机号" label-width="85px">
  <el-input v-model="insertUser.phone" placeholder="请输入用户手机号" ></el-input>
  </el-form-item>

  <el-form-item label="身份"  label-width="85px">
          <el-select v-model="insertUser.platformrole.id"   placeholder="请输入用户身份">
            <el-option
              v-for="item in ident"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
  </el-form-item>
  <el-form-item label="状态"  label-width="85px">
          <el-select v-model="insertUser.state"  placeholder="请选择员工状态">
            <el-option
              v-for="item in status"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
  </el-form>
    </el-col>
  </el-row>
  <div slot="footer" >
  <el-button @click="addUser = false">取 消</el-button>
  <el-button type="primary" @click="addsure">确 定</el-button>
  </div>
  </el-dialog>

</div>
</template>

<script>
export default {
  data(){
    return{
      inforrole:'',
      inforstate:'',
      changeuser:false,
      addUser:false,
      role:'',
      status:[
        {value: '',
        label: ''}, 
        {value: 1,
        label: '正常'}, 
        {value: 0,
        label: '封禁'}, 
      ],
      ident:[
        {value: '',
        label: ''}, 
        {value: 1,
        label: '超级管理员'}, 
        {value: 2,
        label: '普通管理员'}, 
        {value: 3,
        label: '财务部'}, 
        {value: 4,
        label: '运营部'}, 
        {value: 5,
        label: '业务部'}, 
      ],
      userName:'',
      account:'',
      phone:'',
      state:'',
      total:0,
      pageSize:2,
      pageNumber:1,
      dialogMenuVisible:false,
      userlist:'',
      tableData:[],
      userInfo:'',
      state:'',
      rid:'',
      
      insertUser:{
        userName:'',
        account:'',
        passwd:'',
        phone:'',
        state:'',
        platformrole:{
          id:''
        }
      }
    }
  },
  methods:{
    addsure(){
      console.log(this.insertUser)
      if(this.insertUser.state == '' || this.insertUser.platformrole.id == ''){
        this.$message({
          message:'请补全信息！',
          type:'warning'
        })
      }else{
        this.$axios.post('api/user/adduser',this.insertUser,{headers:{'jwt':localStorage.getItem('jwt')}})
        .then(res =>{
          console.log(res.data)
          if(res.data.code == 200){
            this.$message({
              message:'添加成功',
              type:'success'
            })
            this.addUser = false
            this.queryUser()
          }
        })
      }

    },
    doadd(){
      this.addUser=true
    },
    makesure(){
      
      this.userInfo.platformrole.id = this.rid
      console.log(this.userInfo)
      this.$axios.post('api/user/changeuser',this.userInfo,{headers:{'jwt':localStorage.getItem('jwt')}})
      .then(res =>{
        console.log(res.data)
        if(res.data.code == 200){
          this.$message({
          message:'修改成功！',
          type:'success'
        })
        this.changeuser = false,
        this.queryUser()
        }
      })
    
    },
    dochange(val){
      this.changeuser=true;
      this.userInfo=val;
      this.rid = val.platformrole.id
      console.log(this.userInfo)
    },
    
    dofind(){
      this.queryUser()
    },
    handleSelectionChange(row){
     // console.log(row)
    },
      queryUser(){
        let requestResult = {};
        requestResult.pageNum=this.pageNumber;
        requestResult.pageSize = this.pageSize;
        let data = {};
        data.userName = this.userName;
        data.account = this.account;
        data.phone = this.phone;
        data.state = this.state;
        let middle={};
        middle.id = this.role;
        data.platformrole = middle
        requestResult.data = data;
        
        this.$axios.post('api/user/queryuser',requestResult,{headers:{'jwt':localStorage.getItem('jwt')}})
          .then(res =>{
              console.log(res.data)
              if(res.data.code == 200){
                  let pageData = res.data.data
                  this.tableData = pageData.list;
                  console.log(this.tableData)
                  this.pageNum = pageData.pageNum;
                  this.pageSize = pageData.pageSize;
                  this.total = pageData.total;  
              }
          })
        
      },
      prevPage(val){
        this.pageNumber = val;
          this.queryUser()
      },
      nextPage(val){
        this.pageNumber = val;
        this.queryUser()
      },
      sizeChange(val){
        this.pageSize = val;
        this.pageNumber = 1;
        this.queryUser()
      },
      currentChange(val){
        this.pageNumber = val;
        this.queryUser()
      }
  },
  created(){
    this.queryUser();
  }
}
</script>

<style>

</style>